<%--
  Created by IntelliJ IDEA.
  User: lenovo
  Date: 2024-01-16
  Time: 19:21
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
<style>
  .box {
    width: 200px;
    height: 200px;
    border: 1px solid black;
    display: none;
    cursor: pointer;
  }
</style>

<button onclick="showBox(1)">显示盒子1</button>
<button onclick="showBox(2)">显示盒子2</button>
<button onclick="showBox(3)">显示盒子3</button>

<div id="box1" class="box">盒子1</div>
<div id="box2" class="box">盒子2</div>
<div id="box3" class="box">盒子3</div>

<script>
    var box1 = document.getElementById("box1");
    box1.style.display = "block";
  function showBox(boxNumber) {
    // 隐藏所有盒子
    hideAllBoxes();

    // 根据参数显示对应的盒子
    var box = document.getElementById("box" + boxNumber);
    box.style.display = "block";
  }

  function hideAllBoxes() {
    var boxes = document.getElementsByClassName("box");
    for (var i = 0; i < boxes.length; i++) {
      boxes[i].style.display = "none";
    }
  }
</script>
</body>
</html>
